<template>
  <div class="userBox bg-f2">
    <div class="bg-fff">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
        <el-breadcrumb-item>
          <span @click="goBack">主机备案列表</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="pAll">
        <!-- v-loading="loading" -->
        <el-row>
          <el-col :span="2">
            <span class="title">主机备案信息</span>
          </el-col>
          <el-col :span="8">
            <!-- <el-form-item label="添加备案:">
              <el-radio-group v-model="radio" @change="radiochange">
                <el-radio label="单个添加">单个添加</el-radio>
                <el-radio label="批量导入">批量导入</el-radio>
              </el-radio-group>
            </el-form-item> -->
            <div class="pilian_btn" v-if="!ifTag">
              <div>您将通过上传的Excel文件，快速导入主机备案序列码；</div>
              <div>
                导入前，请先
                <!-- <el-button type="text" class="xiaBtn" @click="daoruexc">下载资产导入模板</el-button> -->
                <!-- :href="`${ExcelUrl}zcgl/download`" -->
                <el-link type="primary" :underline="false" :href="'https://cmmop.hnlot.com.cn/cmmop/template/ba.xlsx'" target="_blank">下载主机入网备案导入模板</el-link>填写完成后再上传表格
              </div>
            </div>
            <el-form-item label="导入文件:" v-if="!ifTag">
              <el-upload drag action="#" :auto-upload="false" :limit="1" :on-change="pilalal" :on-remove="pihandleRemove">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">支持 20MB 以内的 xls 文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="设备序列码:" prop="SBXLH" v-if="ifTag">
              <el-input v-model.trim="ruleForm.SBXLH" clearable placeholder="请输入或扫描设备序列码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <!-- <el-button
          type="primary"
          size="medium"
          @click="baoCun('ruleForm')"
          v-show="ruleForm.ZCLX !== 53 ? true : false"
        >保存</el-button>-->
          <el-button class="btnSizeStyle" size="medium" @click="goBack">取消</el-button>
          <el-button class="btnSizeStyle" type="primary" :loading="goliebiao" size="medium" @click="baoCun('ruleForm')" v-if="radio === '单个添加' ? true : false" v-preventReClick>保存</el-button>
          <el-button class="btnSizeStyle" type="primary" :disabled="piliandaor !== '' ? false : true" size="medium" @click="pibaoCun()" v-if="radio !== '单个添加' ? true : false" v-preventReClick
            >保存</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { ziC } from '@/utils/allUrl.js'
export default {
  data: function () {
    return {
      radio: '单个添加',
      ifTag: true,
      // 判断是否为编辑
      haoshow: true,
      // 加载
      //   loading: false,
      ruleForm: {
        SBXLH: '',
      },
      rules: {
        SBXLH: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9-_]+$/, message: '请输入数字或者字母', trigger: 'blur' },
        ],
      },
      title: '', // 标题
      goliebiao: false, // 防重复点击
      // 导入Excel
      ExcelUrl: ziC,
      piliandaor: '',
    }
  },
  created: function () {
    const { title } = this.$route.query
    this.title = title
  },
  methods: {
    // 转换时间格式
    // detaTiem(value) {
    //   if (value) {
    //     const dt = new Date(value)
    //     const y = dt.getFullYear()
    //     const m = (dt.getMonth() + 1 + '').padStart(2, 0)
    //     const d = (dt.getDate() + '').padStart(2, 0)
    //     return `${y}-${m}-${d}`
    //   } else {
    //     return ''
    //   }
    // },

    radiochange(e) {
      if (e !== '批量导入') {
        this.ifTag = true
      } else {
        this.ifTag = false
        this.$refs.ruleForm.resetFields()
      }
    },
    async pibaoCun() {
      const userID = JSON.parse(getUrl('userconter')).id
      const fd = new FormData()
      fd.append('fileUpload', this.piliandaor) // 传文件
      fd.append('BAR_ID', userID)
      const { data: res } = await this.$http.post(`${ziC}zcba/insertZcbaExcel`, fd)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        this.goliebiao = false
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.$router.push('/networkAccessList')
    },
    // 批量添加文件
    async pilalal(el) {
      this.piliandaor = el.raw
    },
    // 批量删除文件
    pihandleRemove(el) {
      if (el.uid === this.piliandaor.uid) {
        this.piliandaor = ''
      }
    },
    baoCun(ruleForm) {
      this.goliebiao = true
      const a = setTimeout(() => {
        this.goliebiao = false
      }, 5000)
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { SBXLH } = this.ruleForm
          const userID = JSON.parse(getUrl('userconter')).id
          const params = new URLSearchParams()
          params.append('BAR_ID', userID)
          params.append('SBXLH', SBXLH)
          params.append('BAZT', 0)
          const { data: res } = await this.$http.post(`${ziC}zcba/create`, params)
          if (res.code === '0014') {
            return
          } else if (res.code !== '0000') {
            clearTimeout(a)
            this.goliebiao = false
            return this.$message({
              type: 'error',
              message: res.message,
              center: true,
            })
          }
          this.$message({
            type: 'success',
            message: res.message,
            center: true,
          })
          this.goBack()
        } else {
          this.goliebiao = false
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    goBack: function () {
      this.$router.push({
        name: 'networkAccessList',
        params: {
          // 传递参数
          pingpai: this.$route.query.pingpai,
          nameList: this.$route.query.nameList,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.userBox {
  .el-row {
    // padding: 15px 25px 0 25px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
    }
    .pilian_btn {
      position: relative;
      width: 258%;
      top: -25px;
      left: 65px;
      padding: 0 18px;
      background-color: #fffbe6;
      > div {
        height: 30px;
        line-height: 30px;
        color: #e28b02;
        .xiaBtn {
          padding: 0;
        }
      }
    }
    .konBox {
      height: 68px;
    }
    .shebeima {
      padding: 0;
      margin-bottom: 10px;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
